<template>

	<view class="container">
		<jpSelect @selected-index-change="handleSelectedIndexChange" @data-updated="handleData" class="seAddress"
			@selectAddress="selectAddress" @delAddress="delAddress" ref="jpSelect" :list="list" @checked="checked"
			:item="item" tite="请选择地址">
		</jpSelect>
		
		
		<view class="row-1">
			<text class="text">订单信息</text>
			<view class="title">
				<image class="image" :src="images" />
				<view class="info">
					<text class="name">{{name}}</text>
					<view class="row-2" style="display: flex; ">
						<text class="price">积分:{{value}}*{{goodsNum}}</text>
						<view class="goodsNum">
							<view class="goods_main">
								<view class="goods_cut" @click="goodsCut">-</view>
								<view class="goods_input">
									<input type="text" v-model.number="goodsNum">
								</view>
								<view class="goods_add" @click="goodsAdd">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="row">
				<view class="label">配送方式</view>
				<!-- <view class="select" @click="chooseDeliveryMethod">{{ selectedDeliveryMethod }}</view> -->
				<view class="fee">商家配送</view>
			</view>
			<view class="row">
				<view class="label">配送费（骑手配送）</view>
				<view class="fee">300积分</view>
			</view>
			<view class="row">
				<view class="label">商品服务</view>
				<view class="fee">免费配送 支持自提 不支持七天退换</view>
			</view>
			<view class="row">
				<view class="label">买家留言</view>
				<input class="input1" placeholder="请输入您的留言信息" v-model="buyerMessage" />
				<!-- <text v-show="!zt">{{buyerMessage}}</text> -->
			</view>
			<view class="row row-3" style="float: right;">
				<view class="total"><text style="color:#969593;font-size: 15px;">共{{ goodsNum }}件，</text>合计：{{ totalPrice }}</view>
			</view>
			<view style="clear: both; "></view>
		</view>

		<view class="bottom">
			<view style="font-weight: bold;padding-top: 20rpx;">
				<text>支付方式</text>
			</view>
			
			<view class="zf">
				<view class="left">
					<text
						style="background-color: #1CA967; font-size: 50rpx; color: #f8f8f8; margin-right: 30rpx;border-radius: 5rpx;">分</text>
					<text>积分兑换</text>
				</view>
				<view class="right" style="display: flex;">
					<text>共需{{totalPrice}}积分</text>
					<view><uni-icons style="margin-left: 10rpx;" type="circle" size="30" @click="onclick"></uni-icons></view>
				</view>
			</view>
		</view>

		<view class="duihuan">
			<view class="left"><text>共{{ goodsNum }}件，</text>合计：{{ totalPrice }}</view>
			<view class="right"><button class="btn" @click="goToPlaceOrder">立即兑换</button>
			</view>
		</view>

	</view>
</template>

<script>
	import jpSelect from '@/components/jp-select/jp-select.vue';
	export default {
		components: {
			jpSelect
		},
		onLoad(query) {
			// console.log(query);
			const objString = query.obj;
			const obj = JSON.parse(decodeURIComponent(objString));
			this.receivedData = obj;
			console.log(this.receivedData);
			this.Data = this.receivedData.Data;
			this.img = this.receivedData.imglist;
			console.log('000', this.receiverName);
		},
		data() {
			return {
				user:{},
				userId:'',
				zt: true,
				receivedData: '', // 接收传递的数据
				receiverName: '',
				contactNumber: '',
				selectedAddress: '',
				selectedMoreAddress:'',
				seleAddress: '',
				doorNumber: '',
				item: '',
				/* list: [{
					name: '小wang',
					phone: '12345678915',
					address: '佛山市南海区',
					moreAddres: '桂城街道',
					isdefult: 1,
					id: 1
				}, {
					name: '小红',
					phone: '12345678915',
					address: '广州市海珠区',
					moreAddres: '昌岗路15号',
					isdefult: 0,
					id: 2
				}], */
				doorNumber: '', //门牌号
				item: '',
				addresslist: '',
				list: [],
				edit: [],
				selectedDeliveryMethod: '', //配送方式
				buyerMessage: '', //买家留言
				// 购物车数量
				goodsNum: 1,
				selectedItemIndex:'',
				commodityDetail:{
					value:'',
					name: '',
					images:'',
				},
			};
		},
		mounted(){
			this.user = uni.getStorageSync('user');
			this.userId = uni.getStorageSync('userId');
			this.address();
		},
		onLoad(options) {
		   const { id, name, value, images} = options;
		   console.log(options)
		   this.id=id
		   this.value=value
		   this.name=name
		   this.images=images
		},
		computed: {
		  url() {
		    return this.commodityDetail.images;
		  }
		},
		methods: {
			//传递
			handleSelectedIndexChange(index) {
				this.selectedItemIndex = index;
				console.log('this.selectedItemIndex', this.selectedItemIndex)
				this.selectedAddress = this.list[index]; // 从地址列表中获取选中的完整地址对象
				console.log('this.selectedAddress',this.selectedAddress)
			},
			//传递地址
			handleData(addressString) {
				this.selecteAddress = addressString; // 将接收到的数据保存到父组件的数据中
			},
			// 请求地址接口
			address() {
				let requestData = {
					userId: this.userId, // 请求参数phone的值为this.userName
			
				};
				uni.request({
					url: 'http://43.136.172.73/api/v1/address/load',
					method: 'GET',
					data: requestData, // 直接使用requestData作为请求参数
					header: {
						"Content-Type": "application/json",
						'Authorization': 'sfsdf',
					},
					success: (res) => {
						// 请求成功的回调函数
						// 假设返回的数据是一个数组
						let newData = res.data.data;
						// 将新数据追加到list数组中
						this.list.push(...newData);
					},
					fail: function(err) {
						// 请求失败的回调函数
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					}
				});
			
			},
			
			checked(el) {
				this.item = el
			},
			toOpen() {
				this.$refs.jpSelect.toOpen()
			},
			chooseAddress() {
				// 选择小区地址逻辑
				console.log(this.receivedData);
			},
			chooseDeliveryMethod() {
				// 选择配送方式逻辑
			},
			goodsCut() {
				if (this.goodsNum > 1) {
					this.goodsNum -= 1
				}
			},
			goodsAdd() {
				this.goodsNum += 1
			},
			contactService() {
				// 联系客服逻辑
			},
			cancelOrder() {
				// 取消订单逻辑
			},
			pay() {
				// 付款逻辑
			},
			onclick(e) {

			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			goToPlaceOrder() {
				 // 判断地址是否为空
				   if (!this.selectedAddress.address) {
				        uni.showToast({
				            title: '请选择地址',
				            icon: 'none'
				        });
				        return;
				    }
				const currentTime = new Date().toLocaleString('en-US', {
					timeZone: 'Asia/Shanghai'
				});
				console.log('1',this.id)
				let order ={
					commodityId:this.id,
					addressId:this.selectedAddress.address,
					description:this.description,
					images:this.images,
					name:this.name,
					userId:this.userId,
					stateId:3
				} 
				// 发送订单ID给后端
				uni.request({
				    url: 'http://43.136.172.73/api/v1/order/create',
				    method: 'POST',
				    data: order,
					header:{
						'Authorization':'sfsdf'
					},
				    success: (res) => {
				        console.log('99',res.data); // 处理支付结果，例如更新订单状态等
				        if (res.data.paymentSuccess) {
				              // 调用生成订单接口
				            this.generateOrder(order);
				        }
				    },
				    fail: (err) => {
				        console.error(err);
				    }
				});
			},
			generateOrder(order) {
				// 发送生成订单请求给后端
			    // 如果订单未支付，生成待支付订单
			    const generateOrderApi = 'http://43.136.172.73/api/v1/order/pay';
			    const apiData = {
			        order,
			        pendingPayment: false // 已支付，不是待支付订单
			    };   
			    uni.request({
			        url: generateOrderApi,
			        method: 'POST',
			        data: apiData,
			        success: (res) => {
			            console.log(res.data); // 处理生成订单结果
			        },
			        fail: (err) => {
			            console.error(err);
			        }
			    });
			}
		},
		computed: {
			// 总价
			totalPrice () {
				return this.value * this.goodsNum+300
			},
		},
		gotoOrder(item){
			uni.navigateTo({
				url:'/pages/purchase/purchase?id=' + item.id + '&name=' + item.name + '&price=' + item.price + '&url=' + item.url
			})
		}
	}
</script>

<style lang="scss" scoped>
	.right {
		display: flex;
		align-items: center;
	}

	.myaddress {
		padding: 10upx 4%;
		padding-bottom: 140upx;
		margin-top: 10upx;
	}

	.order_address {
		height: 180upx;
		width: 100%;
		background-color: #fff;
		border-radius: 10upx;
		position: relative;
		box-shadow: 0upx 0upx 10upx #ddd;
		margin-bottom: 20upx;
	}



	.address_box {
		width: 100%;
		height: 100%;
		display: block;
		z-index: 10;
		box-sizing: border-box;
		padding: 20upx;
		display: flex;
		align-items: center;
	}

	.weizhi_icon text {
		font-size: 40upx;
		margin-left: 10upx;
	}

	.address_box .center {
		width: 100%;
		margin-left: 20upx;
		display: flex;
		justify-content: space-between;
	}

	.address_box .center .name {
		height: 60upx;
		line-height: 60upx;
	}

	.address_box .center .name .text1 {
		font-size: 26upx;
		font-weight: bold;
		color: #333;
		display: inline-block;
		margin-right: 20upx;
	}

	.phones {
		font-size: 24upx;
		color: #999;
		z-index: 0;
	}

	.address_box .address_name {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.noaddress {
		margin-left: 40upx;
		font-weight: bold;
		color: #333;
		font-size: 26upx;
	}

	.container {
		background-color: #f5f5f5;
		padding-top: 20rpx;

		.container1 {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 20rpx 30rpx;


			.address-title {
				font-weight: bold;
				font-size: 40rpx;
			}

			.address-wrapper {
				display: flex;
				align-items: center;

			}

			.address-label {
				margin-right: 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}

			.address-selector {
				width: 0;
				height: 0;
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-top: 20rpx solid black;
				/* 可根据需要修改颜色 */
			}

			.selected-address {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.row {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		font-size: 35rpx;
		padding: 20rpx 0rpx;
		line-height: 120 rpx;

		.label {
			width: 250rpx;
			text-align: left;
			margin-right: 10px;
			margin-left: 40rpx;
			padding: 6rpx;
			white-space: nowrap;
		}

		.text1 {
			width: 250rpx;
		}

		.input1 {
			width: 250rpx;
		}

		.fee {
			color: #969593;
			white-space: nowrap;
			padding-right: 20rpx;
		}

		.text {
			padding: 4px;
		}

	}

	.row-3 {
		padding: 20rpx 20rpx;

		.total {
			font-weight: bold;
			margin-bottom: 5px;
		}
	}

	.row-1 {
	
		background-color: #fff;
		padding-top: 30rpx;

		.text {
			font-size: 36rpx;
			padding-left: 30rpx;
			font-size: 18px;
		}

		.title {
			font-size: 18px;
			// font-weight: bold;
			margin-bottom: 10px;
			display: flex;
			padding: 28rpx;
			margin-top: 20rpx;
		}

		.row-2 {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
		}

		.image {
			width: 80px;
			height: 80px;
		}

		.info {
			flex: 1;
			padding-left: 10px;
		}

		.name {
			margin-bottom: 5px;
		}

		.price {
			// color: #999;
			margin-bottom: 5rpx;
			// font-size: 15px;
		}

		.goodsNum {
			margin-bottom: 5rpx;

			.goods_main {
				display: flex;
				border: 1px solid #737373;
				width: 200rpx;

				.goods_cut {
					margin-left: 10rpx;
					font-size: 20px;
					text-align: center;
				}

				.goods_input {
					margin-left: 20rpx;
					border: 1px solid #737373;
					text-align: center;
				}

				.goods_add {
					margin-left: 10rpx;
					font-size: 20px;
					margin-right: 10rpx;
					text-align: center;
				}
			}
		}

		.btn {
			width: 60rpx;
			height: 60rpx;
			margin: 5rpx;
			border: 1px solid #ccc;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}

		.count {
			margin: 0 8rpx;
		}
	}

	.bottom {
		margin-top: 40rpx;
		justify-content: space-between;
		background-color: #fff;
		font-size: 35rpx;
		padding-left: 40rpx;
		width: 100%;

		.zf {
			display: flex;

			.left {
				flex: 1;
				padding-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.right {
				// flex: 1;
				margin-top: 50rpx;
				margin-right: 30rpx;
			}
		}


	}

	.duihuan {
		display: flex;
		margin-top: 60rpx;
		margin-left: 120rpx;
		// justify-content: flex-end;
		padding-right: 30rpx;
		.left {
			flex: 1;
			margin-top: 20rpx;
			font-size: 20px;
		}

		.right {
			// flex: 1;
			margin-left: 40rpx;
			margin-bottom: 30rpx;

			.btn {
				color: #f8f8f8;
				background-color: #1CA967;
			}
		}
	}
</style>